<script setup lang="ts">
const props = defineProps({
  dataSource: {
    type: Array,
    default: () => []
  },
})
const totalMonthSale = ref<any>(null);
const totalTotalSale = ref<any>(null);
const calcTotalMonthSale = () => {
  totalMonthSale.value = props.dataSource.reduce((total: any, item: { monthSale: any; }) => {
    if (item.monthSale) {
      return total + item.monthSale;
    } else {
      return total;
    }
  }, 0);
}
const calcTotalTotalSale = () => {
  totalTotalSale.value = props.dataSource.reduce((total: any, item: { totalSale: any; }) => {
    if (item.totalSale) {
      return total + item.totalSale;
    } else {
      return total;
    }
  }, 0);
}
computed(() => {
  calcTotalMonthSale();
  calcTotalTotalSale();
  calcData();
})
const columns = [
  {
    dataIndex: 'categoryId',
    title: '类目',
    // width: '120px',
    width: '200px',
    dataType: 'category',
    sorter: (a, b) => a.categoryId - b.categoryId,
    tooltip: true,
  },
  {
    dataIndex: 'productNumber',
    title: '商品数量',
    sorter: (a, b) => a.productNumber - b.productNumber,
    // width: '120px',
  },
  {
    dataIndex: 'productProportion',
    title: '商品占比',
    sorter:  (a, b) => parseInt(a.productProportion) - parseInt(b.productProportion),
    // width: '120px',
  },
  {
    dataIndex: 'monthSale',
    title: '月销量(参考值)',
    sorter: (a, b) => a.monthSale - b.monthSale,
    // width: '120px',
  },
  {
    dataIndex: 'monthSaleProportion',
    title: '月销占比(参考值)',
    sorter: (a, b) => parseInt(a.monthSaleProportion) - parseInt(b.monthSaleProportion),
    // width: '120px',
  },
  {
    dataIndex: 'totalSale',
    title: '总销量(参考值)',
    sorter: (a, b) => a.totalSale - b.totalSale,
    // width: '120px',
  },
  {
    dataIndex: 'totalSaleProportion',
    title: '总销占比(参考值)',
    sorter: (a, b) => parseInt(a.totalSaleProportion) - parseInt(b.totalSaleProportion),
    // width: '140px',
  },
];
const data = ref<any>([]);
const calcData = () => {
  data.value = [];
  // 根据类目分组
  const categoryMap = new Map();
  props.dataSource.forEach((item: any) => {
    if (categoryMap.has(item.categoryId)) {
      categoryMap.get(item.categoryId).push(item);
    } else {
      categoryMap.set(item.categoryId, [item]);
    }
  });
  // 计算每个类目的商品数量
  const categoryProductNumberMap = new Map();
  categoryMap.forEach((value: any, key: any) => {
    categoryProductNumberMap.set(key, value.length);
  });
  // 计算每个类目的月销量
  const categoryMonthSaleMap = new Map();
  categoryMap.forEach((value: any, key: any) => {
    const monthSale = value.reduce((total: any, item: { monthSale: any; }) => {
      if (item.monthSale) {
        return total + item.monthSale;
      } else {
        return total;
      }
    }, 0);
    categoryMonthSaleMap.set(key, monthSale);
  });
  // 计算每个类目的总销量
  const categoryTotalSaleMap = new Map();
  categoryMap.forEach((value: any, key: any) => {
    const totalSale = value.reduce((total: any, item: { totalSale: any; }) => {
      if (item.totalSale) {
        return total + item.totalSale;
      } else {
        return total;
      }
    }, 0);
    categoryTotalSaleMap.set(key, totalSale);
  });
  // 计算每个类目的商品数量占比
  const categoryProductProportionMap = new Map();
  categoryProductNumberMap.forEach((value: any, key: any) => {
    // 判断是否NAN
    if (isNaN((value / props.dataSource.length * 100))) {
      categoryProductProportionMap.set(key, '--');
      return;
    }
    categoryProductProportionMap.set(key, (value / props.dataSource.length * 100).toFixed(2) + '%');
  });
  // 计算每个类目的月销量占比
  const categoryMonthSaleProportionMap = new Map();
  categoryMonthSaleMap.forEach((value: any, key: any) => {
    // 判断是否NAN
    if (isNaN((value / totalMonthSale.value * 100))) {
      categoryMonthSaleProportionMap.set(key, '--');
      return;
    }
    categoryMonthSaleProportionMap.set(key, (value / totalMonthSale.value * 100).toFixed(2) + '%');
  });
  // 计算每个类目的总销量占比
  const categoryTotalSaleProportionMap = new Map();
  categoryTotalSaleMap.forEach((value: any, key: any) => {
    // 判断是否NAN
    if (isNaN((value / totalTotalSale.value * 100))) {
      categoryTotalSaleProportionMap.set(key, '--');
      return;
    }
    categoryTotalSaleProportionMap.set(key, (value / totalTotalSale.value * 100).toFixed(2) + '%');
  });
  // 计算每个类目的商品数量占比
  categoryMap.forEach((value: any, key: any) => {
    data.value.push({
      categoryId: key,
      productNumber: categoryProductNumberMap.get(key),
      productProportion: categoryProductProportionMap.get(key),
      monthSale: categoryMonthSaleMap.get(key),
      monthSaleProportion: categoryMonthSaleProportionMap.get(key),
      totalSale: categoryTotalSaleMap.get(key),
      totalSaleProportion: categoryTotalSaleProportionMap.get(key),
    });
  });
}
watch(() => props.dataSource, () => {
  calcTotalMonthSale();
  calcTotalTotalSale();
  calcData();
}, {deep: true});
onActivated(() => {
  calcTotalMonthSale();
  calcTotalTotalSale();
  calcData();
});
onMounted(() => {
  calcTotalMonthSale();
  calcTotalTotalSale();
  calcData();
});
</script>

<template>
  <base-table table-name="店铺分析-类目分析" :columns="columns" :data-source="data" :scroll="{
  y: 200
}" size="small"
  ></base-table>
</template>

<style scoped>
</style>
